﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .yuanjiao {
            border-radius: 10px
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
    <title>单个标注点沿直线的轨迹运动</title>
</head>
<body>
        <div id="allmap"style="position:  fixed;z-index:1;"></div>
        <input id="id" type="text" style="position: fixed;z-index:2; top:20px; height:24px;"value="201911301"/><button style="position: fixed;z-index:2; top:20px;width:100px; left:160px;" onclick="genzong()">运输跟踪</button>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(118.5486036385, 24.9140369857), 17);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    var menu = new BMap.ContextMenu();//右键菜单
    var txtMenuItem = [
        {
            text: '放大',
            callback: function () { map.zoomIn() }
        },
        {
            text: '缩小',
            callback: function () { map.zoomOut() }
        }
    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);
    map.setCurrentCity("泉州");          // 设置地图显示的城市
    map.addEventListener("click", function (e) {
        alert(e.point.lng + "," + e.point.lat);
    });//单击获取点击的经纬度
    var myP1 = new BMap.Point(118.5473877414, 24.9107009983);    //起点经贸经纬
    var myP2 = new BMap.Point(118.5486036385, 24.9140369857);    //终点软院经纬
    var myP3 = new BMap.Point(118.54927, 24.912356);    //当前经纬
    var myP4 = new BMap.Point(118.552966,24.911111); //小车位置
    var marker = new BMap.Marker(myP3);        // 创建标注    
    map.addOverlay(marker);                     // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    var label = new BMap.Label("附近有暂存点，如您不便可考虑联系快递员暂存", { offset: new BMap.Size(20, -10) });
    marker.setLabel(label);
    var myIcon = new BMap.Icon("./运输中的物流运输车.png", new BMap.Size(32, 70), {    //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  });
	var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
	driving2.search(myP1, myP2);    //显示一条公交线路

    //小车动画
    function genzong () {
        // 创建数据库对象
        var objdbConn = new ActiveXObject("ADODB.Connection");
        // DSN字符串  
        var strdsn = "Driver={SQL Server};SERVER=127.0.0.1;UID=sa;PWD=sa;DATABASE=ELM";
        // 打开数据源  
        objdbConn.Open(strdsn);
        // 执行SQL的数据库查询  
        var objrs = objdbConn.Execute("SELECT RealTime_Location FROM RealTimeLocation where Formal_Order_Id =" + document.getElementById("id").value);
        var shishididian = objrs.Fields(0).Value;
        var result = shishididian.split(",");
        var jindu;
        var weidu;
        for (var i = 0; i < result.length; i++) {
            jindu = result[0]; weidu = result[1];
        }
        var myP5 = new BMap.Point(jindu, weidu); //小车实时位置
		var driving = new BMap.DrivingRoute(map);    //驾车实例
		driving.search(myP1, myP5);
		driving.setSearchCompleteCallback(function(){
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
			var paths = pts.length;    //获得有几个点

			var carMk = new BMap.Marker(pts[0],{icon:myIcon});
			map.addOverlay(carMk);
			i=0;
			function resetMkPoint(i){
				carMk.setPosition(pts[i]);
				if(i < paths){
					setTimeout(function(){
						i++;
						resetMkPoint(i);
					},100);
				}
			}
			setTimeout(function(){
				resetMkPoint(5);
			},100)

		});
	}

	setTimeout(function(){
		run();
    }, 1500);
</script>